<template>
  <div>
    <div class="container-width">
      <category-slider-list @handSearch="categoryHandleSearch" />
      <div class="flex flex-between mar-t--10">
        <breadcrumb :lastName="lastName" />
        <div class="flex v-align-c font-12">
          <span>总共找到</span>
          <span class="font-number pad-l-4 pad-r-4">{{goodsTotal}}</span>
          <span>个</span>
          <!-- <span class="font-number pad-l-4 pad-r-4">女装</span> -->
          <span>商品</span>
        </div>
      </div>
      <div class="bgc-white mar-b-20">
        <goods-sort-search class="mar-b-20" @handleSearch="goodsHandleSearch" :pageIndex="queryParams.currentPage"
          :totalPage="totalPage" />
      </div>
    </div>
    <div class="container-width">
      <detail-goods-list :goodsData="goodsData" :shopInfo="shopInfo" />
      <div class="flex flex-center pad-t-25 pad-b-25 mar-t--23">
        <el-pagination background @current-change="handleCurrentChange"
          :current-page="queryParams.currentPage" :page-size="queryParams.size"
          layout="prev, pager, next, jumper" :total="goodsTotal">
        </el-pagination>
      </div>
      <div class="height-11" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import categorySliderList from '@/components/categorySliderList/index.vue'
import breadcrumb from '@/components/breadcrumb/index.vue'
import goodsSortSearch from '@/pages/shop/components/goodsSortSearch/index.vue'
import detailGoodsList from '@/pages/shop/components/detailGoodsList/index.vue'
import pic7 from '@/assets/images/uploads/pic-7.png'
import { getGoodsListPage } from '@/api/goods/goods'
import event from '@/model/event'
export default defineComponent({
  name: 'Index',
  components: {
    categorySliderList,
    breadcrumb,
    goodsSortSearch,
    detailGoodsList
  },
  props: {
    shopId: {
      type: String
    }
  },
  setup(props) {
    const router = useRouter()
    onMounted(() => {
      initGoodsList()
    })
    let queryParams = ref({
      size: 80,
      currentPage: 1,
      title: '',
      categoryId: '',
      conditionColumn: '',
      sort: '',
      minPrice: '',
      maxPrice: '',
      supplierId: props.shopId
    })
    const goodsTotal = ref(0)
    const goodsData = ref([{
      'goodsId': ''
    }])
    const lastName = ref('商品列表')
    const initGoodsList = () => {
      getGoodsListPage(queryParams.value).then(response => {
        if (response.isError) return
        goodsTotal.value = response.data.total
        goodsData.value = response.data.records
      })
    }
    const goNext = (id:string) => {
      id = '35'
      router.push('/shop/detail/' + id)
    }
    const handleCurrentChange = (currentPage) => {
      queryParams.value.currentPage = currentPage
      initGoodsList()
    }
    
    const categoryHandleSearch = (form:any) => {
      if (form.show) {
        queryParams.value.categoryId = form.categoryId
        lastName.value = form.lastName
      }else{
        queryParams.value.categoryId = ''
        lastName.value = '商品列表'
      }
      initGoodsList()
    }
    
    const goodsHandleSearch = (form:any) => {
      queryParams.value.sort = form.sort
      queryParams.value.conditionColumn = form.conditionColumn
      queryParams.value.minPrice = form.minPrice
      queryParams.value.maxPrice = form.maxPrice
      initGoodsList()
    }
    
    const handleSearch = (form:any) => {
      queryParams.value.title = form.title
      initGoodsList()
    }
    
    const totalPage = computed(() => {
      return goodsTotal.value ? Math.ceil(goodsTotal.value/queryParams.value.size) : 1
    })
    
    event.on('logoShopBar_search', (data) => {
    	handleSearch(data)
    })

    return {
      pic7,
      goNext,
      queryParams,
      initGoodsList,
      goodsTotal,
      goodsData,
      handleCurrentChange,
      lastName,
      totalPage,
      categoryHandleSearch,
      goodsHandleSearch,
      handleSearch
    }
  }
})
</script>

<style lang="scss" scoped>
$darkBlue: #182245;
.line-shop{
  height: 2px;
  background: $darkBlue;
}
.shop-h-pic{
  height: 108px;
  img{
    max-height: 108px;
  }
}
.space-category{
  width: 264px;
}
.slider-sign-notice{
  width: 232px;
}
.footer-line{
  height: 1px;
  background: #dbdbdb;
  margin: 0 3%;
}
</style>
